<template>
  <div class="box detail">
    <header class="header">
      <van-nav-bar left-arrow @click-left="$router.push('/kind')" @click-right="showShare = true">
        <template #title>
          <p>{{proName}}</p>
        </template>
        <template #right>
            <van-icon name="bars" size="24" />
          </template>
      </van-nav-bar>
      <van-tabs >
        <van-tab title="商品详情"></van-tab>
      </van-tabs>
    </header>
    <div class="proCont">
      <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="(item,idx) in proImg" :key="idx" @click="proview(idx)">
          <van-image width="100%" height="4rem" fit="cover" :src="item" />
        </van-swipe-item>
      </van-swipe>
      <!-- <p>接收到的id为：{{$route.params.id}}</p> -->
      <div class="proInfo">
        <div>
          <div>{{proName}}</div>
        </div>
        <div><p>价格：{{price}}</p></div>
        <p>口味：{{taste}}</p>
        <p>原材料：{{raw}}</p>
        <p>适合人群：{{eaters}}</p>
        <p>保存条件：{{preser}}</p>
        <van-image src="https://res.bestcake.com/images/app/last_productnew_1/%E4%B8%80%E8%A7%81%E5%80%BE%E5%BF%831.jpg" />
        <van-image src="https://res.bestcake.com/images/app/last_productnew_1/%E4%B8%80%E8%A7%81%E5%80%BE%E5%BF%832.jpg" />
        <van-image src="https://res.bestcake.com/images/app/last_productnew_1/%E4%B8%80%E8%A7%81%E5%80%BE%E5%BF%833.jpg" />
        <van-image src="https://res.bestcake.com/images/app/last_productnew_1/%E4%B8%80%E8%A7%81%E5%80%BE%E5%BF%834.jpg" />
      </div>
    </div>
    <div class="ft">
      <div class="pr">
        <p>价格:￥{{price}}</p>
      </div>
      <van-goods-action>
        <van-goods-action-button color="#02d4d7" text="加入购物车" @click="addCart" />
        <van-goods-action-button color="#02d4d7" text="立即购买" />
      </van-goods-action>
    </div>
    <van-share-sheet v-model="showShare" :options="options" />
    <!-- 商品规格 -->
    <!-- <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :custom-stepper-config="customStepperConfig"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    /> -->
  </div>
</template>

<script>
import Vue from 'vue'
import Cookies from 'js-cookie'
import { Swipe, SwipeItem, Image as VanImage, ImagePreview, GoodsAction, GoodsActionIcon, GoodsActionButton, NavBar, Icon, Tab, Tabs, ShareSheet, Toast, Sku, Stepper } from 'vant'

import { getDetail, addCart } from '../../api/index.js'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(ShareSheet)
Vue.use(Toast)
Vue.use(Sku)
Vue.use(Stepper)

export default {
  data () {
    return {
      price: 0,
      proImg: '',
      proName: '',
      raw: 0,
      taste: '',
      eaters: 0,
      preser: 0,
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
        { name: '分享海报', icon: 'poster' },
        { name: '复制链接', icon: 'link' }
      ]
      // show: true,
      // sku: {
      //   // 数据结构见下方文档
      // },
      // goods: {
      //   // 数据结构见下方文档
      //   picture: 'https://img.yzcdn.cn/1.jpg'
      // },
      // customStepperConfig: {
      //   value: 1
      // }
    }
  },
  mounted () {
    // console.log(res.data.data)
    // 根据路由跳转时携带的商品id,请求数据库中的商品详情数据
    getDetail({
      id: this.$route.params.id
    }).then(res => {
      console.log(res)
      // 解析数据
      this.proImg = [res.data.data.proImg,
        'https://res.bestcake.com/m-images/ns-detail/%E4%B8%80%E8%A7%81%E5%80%BE%E5%BF%83/%E4%B8%80%E8%A7%81%E5%80%BE%E5%BF%83-2.jpg?v=20170525?v=1',
        'https://res.bestcake.com/m-images/ns-detail/%E4%B8%80%E8%A7%81%E5%80%BE%E5%BF%83/%E4%B8%80%E8%A7%81%E5%80%BE%E5%BF%83-3.jpg?v=20170525?v=1'
      ]
      this.proName = res.data.data.proName
      this.raw = res.data.data.raw
      this.price = res.data.data.price
      this.eaters = res.data.data.eaters
      this.preser = res.data.data.preser
      this.taste = res.data.data.taste
      // console.log(res.data.data.raw)
    })
  },
  methods: {
    proview (id) {
      ImagePreview({
        images: this.proImg,
        startPosition: id
      })
    },
    addCart () {
      // 添加购物车之前进行一个前端的路由守卫 检测是否已登陆
      if (Cookies.get('isLogin') === 'ok') {
        addCart({
          // 本地存储了userId token islogin
          userId: Cookies.get('userId'),
          proId: this.$route.params.id,
          token: Cookies.get('token')
        }).then(res => {
          // 数据请求成功
          Toast({
            message: '添加购物车成功',
            onClose: () => {
              this.$router.push('/kind')
            }
          })
        })
      } else {
        this.$router.push('/login')
      }
    },
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    }
    // onBuyClicked () {},
    // onAddCartClicked () {}
  }
}
</script>

<style lang="scss">
.detail{
  display: flex;
  .van-tabs__line{
    display: none;
  }
  .proCont{
    flex:1;
    overflow: auto;
    .proInfo{
      padding: 0 0.1rem 0.5rem;
    }
  }
  .ft{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #EEEEEE;
    .van-goods-action{
      width: 50%;
      position: static;
    }
    .pr{
      width: 50%;
      p{
        font-size: 0.2rem;
        color: #EE0A24;
        text-align: center;
      }
    }
  }
}
</style>
